<template>
    <div class="ODBody wap">
      <x-header class="whiteTheme fixedHead" :left-options="{backText: '',preventGoBack:true}" @on-click-back="goBack">订单详情</x-header>
      <div class="main">
        <scroller>
          <div class="customerInfo display-flex flex-direction-row align-items-center justify-content-flex-justify">
            <div class="addressLogo display-flex flex-direction-row align-items-center justify-content-flex-center">
              <img src="../../../assets/img/cart/icon_01.png" alt="">
            </div>
            <div class="customerNameAndAddress display-flex flex-direction-column">
              <div class="customerName display-flex flex-direction-row align-items-flex-end">
                <p>{{orderData.receiverName}}</p>
                <span>{{orderData.receiverMobile}}</span>
              </div>
              <div class="customerAddress">
                <span>{{orderData.receiverAddr}}</span>
              </div>
            </div>
          </div>
          <div class="orderDetailBox">
            <div class="orderTitle display-flex flex-direction-row align-items-center justify-content-flex-justify">
              <div class="orderTitleL display-flex flex-direction-row align-items-center justify-content-flex-center">
                <img :src="(orderData.sellerDistributorVO&&orderData.sellerDistributorVO.logo)?orderData.sellerDistributorVO.logo:null" alt="">
              </div>
              <div class="orderTitleR">
                <div style="font-size: 14px;font-weight: bold;color: #333333" class=" display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p class="orderTitleRNameText">{{(orderData.sellerDistributorVO&&orderData.sellerDistributorVO.name)?orderData.sellerDistributorVO.name:null}}</p>
                  <p>{{orderData.completeState==0?'已取消':(orderData.completeState==2?'已完成':(orderData.payState==0?'未支付':'已支付'))}}</p>
                </div>
                <div style="font-size: 12px;" class=" display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <span style="color: #666666;">{{orderData.creTime}}</span>
                  <div class=" display-flex flex-direction-row">
                    <span v-if="orderData.completeState==0" :style="{color:(orderData.payState==0?'#FAB945':'#4DC0A1')}">[{{orderData.payState==0?'未支付':'已支付'}}]</span>
                    <span :style="{color:(orderData.deliverState==0?'#FAB945':'#4DC0A1')}">[{{orderData.deliverState==0?'未配送':'已配送'}}]</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="hr"></div>
            <div class="orderContent">
              <ul class="orderList">
                <li v-for="(item,index) in (orderData.saleOrderDetailVOList||'').slice(0,3)" :key="index" class="orderItem display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <div class="orderItemImg display-flex flex-direction-row align-items-center justify-content-flex-justify">
                    <img :src="item.goodsPic" alt="">
                  </div>
                  <div class="orderItemInfo display-flex flex-direction-column">
                    <p class="shopName">[{{item.brandName}}] {{item.goodsName}}</p>
                    <div class="unit">
                      <span>{{item.goodsSpec}}</span>
                    </div>
                    <div class=" display-flex flex-direction-row align-items-center justify-content-flex-justify">
                      <div v-if="item.taxPrice&&item.taxPrice!=0"  class="display-flex flex-direction-row">
                        <span>￥</span>
                        <span>{{item.taxPrice}}</span>
                        <span>/{{item.unitName}}</span>
                      </div>
                      <div v-else>
                        <span v-if="item.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                        <span v-else style="color: #FC6E51;font-size: 11px">询价</span>
                      </div>
                      <div class="display-flex flex-direction-row">
                        <span>×</span>
                        <p>{{item.num}}</p>
                      </div>
                    </div>
                  </div>
                </li>
                <li v-if="orderData.loadMore" v-for="(item,index) in (orderData.saleOrderDetailVOList||'').slice(3)" :key="'loadMore'+index" class="orderItem display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <div class="orderItemImg display-flex flex-direction-row align-items-center justify-content-flex-justify">
                    <img :src="item.goodsPic" alt="">
                  </div>
                  <div class="orderItemInfo display-flex flex-direction-column">
                    <p class="shopName">[{{item.brandName}}] {{item.goodsName}}</p>
                    <div class="unit">
                      <span>{{item.goodsSpec}}</span>
                    </div>
                    <div class=" display-flex flex-direction-row align-items-center justify-content-flex-justify">
                      <div v-if="item.taxPrice&&item.taxPrice!=0"  class="display-flex flex-direction-row">
                        <span>￥</span>
                        <span>{{item.taxPrice}}</span>
                        <span>/{{item.unitName}}</span>
                      </div>
                      <div v-else>
                        <span v-if="item.enquiry==0" style="color: #FC6E51;font-size: 11px">赠品</span>
                        <span v-else style="color: #FC6E51;font-size: 11px">询价</span>
                      </div>
                      <div class="display-flex flex-direction-row">
                        <span>×</span>
                        <p>{{item.num}}</p>
                      </div>
                    </div>
                  </div>
                </li>
                <div v-if="(orderData.saleOrderDetailVOList||'').length>3" class="loadMore display-flex flex-direction-row justify-content-flex-center align-items-center">
                  <p v-if="!orderData.loadMore" class="display-flex flex-direction-row justify-content-flex-center align-items-center" @click="loadMoreFn(orderData)">
                    <span style="color: #666666">共有{{orderData.saleOrderDetailVOList.length}}条信息</span>
                    <img src="../../../assets/img/cart/down.png" alt="" style="width: .2rem;height: .25rem;margin-left: .1rem">
                  </p>
                  <p v-else class="display-flex flex-direction-row justify-content-flex-center align-items-center" @click="loadMoreFn(orderData)">
                    <span style="color: #666666">收&nbsp;&nbsp;起</span>
                  </p>
                </div>
                <!--<div class="more display-flex flex-direction-row align-items-center justify-content-flex-center">-->
                <!--<div class="moreBtn display-flex flex-direction-row align-items-center justify-content-flex-center">-->
                <!--<p>共20条信息</p>-->
                <!--<img src="../../../assets/img/cart/down.png" alt="">-->
                <!--</div>-->
                <!--</div>-->
              </ul>
              <div class="hr"></div>
              <div class="priceDetail">
                <div class="display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p style="color: #333333;font-size: 15px">订单金额</p>
                  <p style="color: #333333;font-size: 14px">￥{{orderData.goodsAmount}}</p>
                </div>
                <div class="display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p style="color: #333333;font-size: 15px">红包抵扣</p>
                  <p style="color: #FB6E52;font-size: 14px"> - ￥{{orderData.redPacketAmount}}</p>
                </div>
                <div class="display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p style="color: #333333;font-size: 15px">优惠金额</p>
                  <p style="color: #FB6E52;font-size: 14px"> - ￥{{orderData.discountAmount}}</p>
                </div>
                <div class="display-flex flex-direction-row align-items-center justify-content-flex-justify">
                  <p style="color: #333333;font-size: 15px">服务加价</p>
                  <p style="color: #333333;font-size: 14px">￥{{orderData.serviceAmount}}</p>
                </div>
              </div>
              <div class="hr"></div>
              <div class="allPrice display-flex flex-direction-row align-items-center justify-content-flex-justify">
                <div> </div>
                <p>{{orderData.payState==1?"实付款：":"待付款："}}￥<span>{{orderData.realAmount}}</span></p>
              </div>
            </div>
          </div>
          <div class="orderNum display-flex flex-direction-row align-items-center justify-content-flex-justify">
            <div style="margin-left: .2rem">
              <p class="title">订单编号：</p>
            </div>
            <div style="margin-right: .2rem" class="display-flex flex-direction-row align-items-end justify-content-flex-center">
              <span class="num">{{orderData.orderNo}}</span>
              <div class="copyBtn display-flex flex-direction-row align-items-center justify-content-flex-center" @click="copyOrderNo">
                <span>复制</span>
              </div>
            </div>
          </div>
          <div class="orderStatus display-flex flex-direction-row align-items-center justify-content-flex-justify">
            <div style="margin-left: .2rem">
              <p class="title">订单状态跟踪：</p>
            </div>
            <div @click="goTrack" style="margin-right: .2rem" class="display-flex flex-direction-row align-items-end justify-content-flex-center">
              <img style="width: .14rem;height: .26rem" src="../../../assets/img/cart/moreRight.png" alt="">
            </div>
          </div>
          <!--<div class="uploadBox display-flex flex-direction-row">-->
          <!--<div>-->
          <!--<p style="margin-left: .3rem;margin-top: .2rem">附件：</p>-->
          <!--</div>-->
          <!--<div style="height: 1.6rem;margin-top: .2rem;width: 5.5rem;">-->
          <!--<ul class="display-flex flex-direction-row align-items-center justify-content-flex-end">-->
          <!--<li>-->
          <!--<img src="../../../assets/img/cart/goodsDemoImg.jpg" alt="">-->
          <!--</li>-->
          <!--<li>-->
          <!--<img src="../../../assets/img/cart/goodsDemoImg.jpg" alt="">-->
          <!--</li>-->
          <!--<li>-->
          <!--<img src="../../../assets/img/cart/uploadImg.png" alt="">-->
          <!--</li>-->
          <!--</ul>-->
          <!--</div>-->
          <!--</div>-->
          <div class="msgBox">
            <div class=" display-flex flex-direction-row">
              <div class="title"><p>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</p></div>
            </div>
            <div class="memo">
              <p >{{orderData.memo}}</p>
            </div>
            <div class=" display-flex flex-direction-row">
              <div class="title">
                <p>我的留言：</p>
              </div>
            </div>
            <div class="msg display-flex flex-direction-column">
              <div class="msgItem" v-for="(item, index) in orderData.saleOrderCommentVOList" :key="index">
                <p v-if="item.buyerId">{{decodeURIComponent(item.comment)}}</p>
                <p v-if="item.sellerId" class="sellMsgBox"><span style="color: #527DD9">卖家留言：</span>{{decodeURIComponent(item.comment)}}</p>
              </div>
              <div class="submitMsg display-flex flex-direction-row">
                <input type="text" v-model="context" placeholder="请输入留言信息">
              </div>
            </div>
            <p @click="submitText" class="submitBtn display-flex flex-direction-row align-items-center justify-content-flex-center">
              <span>留言发送</span>
            </p>
          </div>
        </scroller>
      </div>
    </div>
</template>

<script>
    export default {
        name: "orderDetails",
        data(){
          return{
            orderData:{},
            saleOrderId:'',
            contentHeight:'',
            context:'',
            docmHeight:document.documentElement.clientHeight, //初始屏幕高度
            submitTextState:true
          }
        },
        mounted(){
          this.contentHeight = (document.body.clientHeight*2/100 - 1.1) + 'rem';
          this.saleOrderId = this.$route.query.id;
          this.getOederDetail();
          if (this.$platform() == 1) {
            window.onresize=()=>{
              if(document.body.clientHeight<this.docmHeight){
                if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
                  setTimeout(function () {
                    document.activeElement.scrollIntoViewIfNeeded();
                  }, 100);
                }
              } else {
                document.getElementsByClassName("_v-container")[0].scrollTop=0;
              }
            }
          }

          this.$callJava({ onBackPressed: true });
        },
        destroyed(){
          this.$callJava({ onBackPressed: false });
        },
        methods:{
          loadMoreFn(item){
            item.loadMore = !item.loadMore;
          },
          getOederDetail(){
            this.$ajax.get('replenish/order/detail',res=>{
              // console.log(res)
              if(res.code == '200'){
                res.data.loadMore = false;
                this.orderData = res.data;
              }else{
                this.$vux.toast.text(res.msg, 'center');
              }
            },{saleOrderId:this.saleOrderId});
          },
          copyOrderNo(){
            //this.$callJava({code:1005,orderNo:this.orderData.orderNo})
            if(this.$fromApp(this)){
              this.$callJava({code:1005,orderNo:this.orderData.orderNo})
            }else{
              // console.log(this.orderData.orderNo)
              const input = document.createElement('input');
              document.body.appendChild(input);
              input.setAttribute("value",this.orderData.orderNo);
              input.select();
              if(document.execCommand("copy")){
                document.execCommand("copy");
                this.$vux.toast.text('复制成功!');
              }
              document.body.removeChild(input);
            }
          },
          goTrack(){
            if(this.$fromApp(this)){
              this.$router.push({path:'/purchase/orderTrack',query:{saleOrderId:this.saleOrderId,orderNo:this.orderData.orderNo,from:'app'}})
            }else{
              this.$router.push({path:'/purchase/orderTrack',query:{saleOrderId:this.saleOrderId,orderNo:this.orderData.orderNo}})
            }
          },
          submitText(){
            if(this.submitTextState){
              this.submitTextState = false;
              if(this.context.trim()==''){
                this.context = '';
                this.$vux.toast.text('请输入信息!');
                this.submitTextState = true;
                return;
              }
              let params = {
                saleOrderId:this.saleOrderId,
                context:encodeURIComponent(this.context.trim())
              }
              this.$ajax.post('replenish/order/submit_comment',params,res=>{
                // console.log(res);
                if(res.code == '200'){
                  this.context = '';
                  this.submitTextState = true;
                  this.getOederDetail();
                }else{
                  this.$vux.toast.text(res.msg, 'center');
                }
              })
            }

          },
          goBack(){
            // if(this.$route.query.push==1){
            //   this.$callJava({code:1007});
            // }else{
              this.$router.go(-1);
            // }
          }
        }
    }
</script>

<style lang="less" type="text/less" scoped>
  ul>li{
    list-style: none;
  }
.ODBody{
  .fixedHead{
    /*z-index: 999;*/
  }
  .customerInfo{
    height: 1.85rem;
    margin: 0rem .3rem .3rem;
    background-color: #FFFFFF;
    border-radius: 8px;
    .addressLogo{
      width: 1rem;
      height: 1.85rem;
      img{
        width: .28rem;
        height: .33rem;
      }
    }
    .customerNameAndAddress{
      width: 5.9rem;
      .customerName{
        p{
          color: #222222;
          font-size: 16px;
          font-weight: bold;
          margin-right: .1rem;
        }
        span{
          color: #999999;
          font-size: 15px;
        }
      }
      .customerAddress{
        color: #333333;
        font-size: 13px;
      }
    }
    .moreRight{
      width: .82rem;
      height: 1.85rem;
      img{
        width: .14rem;
        height: .26rem;
      }
    }
  }
  .orderDetailBox{
    margin: 0 .3rem .3rem;
    border-radius: 8px;
    background-color: #ffffff;
    .hr{
      width: 100%;
      height: 1px;
      background-color: #EBEBEB;
    }
    .orderTitle{
      width: 100%;
      height: 1.38rem;
      .orderTitleL{
        width: 1.26rem;
        img{
          width: .78rem;
          height: .78rem;
        }
      }
      .orderTitleR{
        width: 5.4rem;
        margin-right: .3rem;
        .orderTitleRNameText{
          width: 4rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .orderContent{
      margin: 0 .23rem;
      .orderList{
        .orderItem{
          .orderItemImg{
            height: 1.6rem;
            img{
              width: 1.4rem;
              height: 1.4rem;
            }
          }
          .orderItemInfo{
            width: 4.8rem;
            .shopName{
              color: #333333;
              font-size: 13px;
              font-weight: bold;
            }
            .unit{
              span{
                color: #666666;
                font-size: 10px;
                background-color: #EEEEEE;
                padding: 0.02rem .2rem;
                margin: .1rem 0;
                height: .32rem;
                border-radius: .16rem;
              }
            }
          }
        }
        .loadMore{
          p{
            margin: 0.3rem 0;
            border: 1px solid #eeeeee;
            height: .6rem;
            border-radius: .3rem;
            padding: 0 .3rem;
          }
        }
      }
      .priceDetail{
        margin: .1rem 0;
      }
      .allPrice{
        height: 1rem;
        color: #333333;
        p{
          font-size: 13px;
        }
        span{
          font-size: 21px;
          font-weight: bold;
        }
      }
    }
  }
  .orderNum{
    margin: 0 .3rem .3rem;
    background-color: #FFFFFF;
    height: 1rem;
    border-radius: 8px;
    .title{
      color: #333333;
      font-size: 15px;
    }
    .num{
      color: #999999;
      font-size: 14px;
    }
    .copyBtn{
      color: #333333;
      font-size: 10px;
      height: .4rem;
      line-height: .4rem;
      border-radius: .2rem;
      padding: 0 .2rem;
      margin-left: .2rem;
      border: 1px solid #DDDDDD;
    }
  }
  .orderStatus{
    margin: 0 .3rem .3rem;
    background-color: #FFFFFF;
    height: 1rem;
    border-radius: 8px;
    .title{
      color: #333333;
      font-size: 15px;
    }
    img{
      margin-top: .1rem;
      margin-left: .1rem;
    }
  }
  .uploadBox{
    margin: 0 .3rem .3rem;
    background-color: #FFFFFF;
    height: 2.02rem;
    border-radius: 8px;
    ul>li{
      img{
        width: 1.3rem;
        height: 1.3rem;
        margin-top: 0.15rem;
        margin-left: 0.2rem;
      }
    }
  }
  .msgBox{
    margin: 0 .3rem .3rem;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: .2rem 0;
    .title{
      p{
        color: #333333;
        font-size: 15px;
        margin-left: .3rem;
      }
    }
    .memo{
      margin: .05rem .3rem;
      p{
        background-color: #F5F5F5;
        padding: .2rem 0;
      }
    }
    .msg{
      margin-left: .3rem;
      width: 6.5rem;
      font-size: 13px;
      margin-top: .05rem;
      .msgItem{
        width: 6.5rem;
        word-break: break-word;
        margin-top: .05rem;
        p{
          margin-bottom: .2rem;
        }
        .sellMsgBox{
          padding: .2rem;
          background-color: #F5F5F5;
        }
      }
      .submitMsg{
        input{
          width: 6.2rem;
          height: .64rem;
          outline: none;
          border: 1px solid #DDDDDD;
          text-indent: 10px;
          margin-right: .08rem;
          border-radius: 3px;
        }
      }
    }
    .submitBtn{
      width: 6.25rem;
      height: .9rem;
      text-align: center;
      line-height: .66rem;
      font-size: 14px;
      color: #FFFFFF;
      border-radius: 3px;
      background-color: #527DD9;
      margin-top: .2rem;
      margin-left: .3rem;
    }
  }
}
</style>
